<template>
  <div>
    <!-- <el-container> -->
      <el-row :gutter="10" type="flex">
        <el-col :span="5">
          <!-- <div> -->
            <el-card style="height:calc(88vh)">
              <div slot="header" class="clearfix">
                <el-input placeholder="请输入名称" v-model="bookNameParam">
                    <el-button slot="append" icon="el-icon-search" @click="getBookList()"></el-button>
                  </el-input>
              </div>
              <div v-for="(item) in bookList" :key="item.id" class="book_item" @click="showQrDiyByBook(item.id,item.bookName)" :style="item.id==curBookId?'cursor:pointer;background-color:#2DB7A0;color:#FFFFFF':'cursor:pointer;background-color:unset;color:#303133'">
                {{item.bookName}}
              </div>
              <el-pagination
                    background
                    small
                    :hide-on-single-page="true"
                    :total="bookTotal"
                    :page-size="bookSize"
                    layout="prev, pager, next"
                    :pager-count=5
                    @current-change="changeBookPage"
                  ></el-pagination>
            </el-card>
          <!-- </div> -->
        </el-col>
        <el-col :span="19">
          <!-- <div> -->
            <el-tabs v-model="activeName" @tab-click="changeTab" type="border-card" style="box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border:1px solid #EBEEF5">
              <el-tab-pane label="二维码图标配置" name="first">
                <div style="text-align:center">
                  <el-divider content-position="left">二维码展示  <span style="color:red;font-size:16px">(只能上传jpg/png格式，建议尺寸45*45)</span></el-divider>
                  <el-row>
                    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6" v-for="(item) in qrDiyList" :key="item.id" style="margin-bottom:30px;">
                        <div class="qrbg">
                          <img :src="item.logo" class="qr_logo">
                        </div>
                        <div>
                          <span>{{item.title}}</span>
                          <div class="qr_button_bottom clearfix">
                            <el-row type="flex" justify="space-around">
                              <el-col>
                                <el-upload
                                  :action="uploadFilePath"
                                  :show-file-list="false"
                                  :on-success="uploadSuccess.bind(this, item)" style="display:unset;padding-right:12px;">
                                  <el-button size="small" type="primary">上传</el-button>
                                </el-upload>
                                <el-button  size="small" type="primary" @click="saveBookQrDiy(item)" :disabled="item.isSaveDisable">保存</el-button>
                                <el-button  size="small" type="info" @click="deleteBookQrDiy(item)" :disabled="item.isResetDisable">重置</el-button>
                              </el-col>
                            </el-row>
                          </div>
                        </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="素材码" name="second" style="height:calc(79vh)">
                <!-- <div style="margin-top:5px;"> -->
                  <el-form label-width="100px">
                    <el-col :span="6">
                      <el-form-item label="二维码名称">
                        <el-input placeholder="请输入二维码名称" v-model="qrNameParam"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="资源类型">
                        <el-select v-model="resourceTypeParam">
                          <el-option label="请选择" value="" selected></el-option>
                          <el-option label="图片" value="1"></el-option>
                          <el-option label="视频" value="2"></el-option>
                          <!-- <el-option label="WORD" value="3"></el-option> -->
                          <el-option label="资源组" value="4"></el-option>
                          <el-option label="PPT" value="5"></el-option>
                          <!-- <el-option label="PDF" value="6"></el-option> -->
                          <el-option label="音频" value="7"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="1">
                      <el-button size="small" type="primary" @click="listResourceQr()">查询</el-button>
                    </el-col>
                  </el-form>

                  <div style="margin-bottom:10px;display:block;clear:both">
                    <el-button size="small" type="primary" @click="generateMultiResQrCode()">批量生成二维码</el-button>
                    <el-button size="small" type="primary" @click="exportResQrCode()">导出本书二维码</el-button>
                  </div>
                  <el-table :data="tableList" ref="resQrTable" height="77%">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="res_name" label="资源名称"></el-table-column>
                    <el-table-column prop="name" label="二维码名称"></el-table-column>
                    <!-- <el-table-column prop="book_name" label="所属图书"></el-table-column> -->
                    <el-table-column prop="scan_count_before" label="扫码次数(发布前)" :formatter="formatScanCount"></el-table-column>
                    <el-table-column prop="scan_count_after" label="扫码次数(发布后)"></el-table-column>
                    <el-table-column prop="res_type" label="资源类型" :formatter="showResType"> </el-table-column>
                    <!-- <el-table-column prop="res_suffix" label="文件格式"> </el-table-column> -->
                    <el-table-column prop="create_time" label="生成时间" width="100"> </el-table-column>
                    <el-table-column label="操作" width="150">
                      <template slot-scope="scope">
                        <el-button v-if="scope.row.code != undefined && scope.row.code != null && scope.row.code != ''" type="primary" size="small" @click="showQrCode(scope.row)">查看二维码</el-button>
                        <el-button v-else type="primary" size="small" @click="generateResQrCode(scope.row)">生成二维码</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination
                    background
                    :hide-on-single-page="true"
                    :total="tableTotal"
                    :page-size="size"
                    layout="prev, pager, next"
                    @current-change="changePage"
                    style="text-align:center;margin-top:10px"
                  ></el-pagination>
                <!-- </div> -->
              </el-tab-pane>
              <el-tab-pane label="章节码" name="third" style="height:calc(79vh)">
                <!-- <el-row> -->
                  <!-- <el-col :span="7">
                    <div>
                      <el-card style="height:calc(80vh);" shadow="never">
                        <div slot="header" class="clearfix">
                          <el-checkbox label="一级目录"></el-checkbox>
                          <el-checkbox label="二级目录"></el-checkbox>
                          <el-checkbox label="三级目录"></el-checkbox>
                        </div>

                        <el-scrollbar style="height:100%;">
                          <el-tree
                            :data="bookCatalogList"
                            highlight-current
                            default-expand-all
                            show-checkbox
                            node-key="id"
                            @node-click="catalogClick">
                          </el-tree>
                        </el-scrollbar>
                      </el-card>
                    </div>
                  </el-col> -->
                  <!-- <el-col :span="24"> -->
                    <div style="margin-bottom:10px;display:block;clear:both">
                      <el-button size="small" type="primary" @click="generateMultiChapterQrCode()">生成章节码</el-button>
                      <el-button size="small" type="primary" @click="exportChapterQrCode()">导出章节码</el-button>
                    </div>
                    <div style="margin-bottom:10px;display:block;clear:both">
                      <el-checkbox  v-for="level in maxLevel" :key="level" @change="checked=>levelCheck(checked, level)">
                        {{level}}级目录
                      </el-checkbox>

                    </div>
                    <el-table :data="bookCatalogList" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" ref="chapterQrTable" height="88%" :expand-row-keys="[curBookId]">
                      <el-table-column type="selection" width="55"></el-table-column>
                      <el-table-column prop="name" label="章节名称" :formatter="groupChapter" show-overflow-tooltip></el-table-column>
                      <el-table-column prop="qr_name" label="二维码名称" width="100" show-overflow-tooltip></el-table-column>
                      <el-table-column label="资源数量" width="80">
                        <template slot-scope="res_count_scope">
                          <a href="javascript:void(0)" @click="listRes(res_count_scope.row)" style="text-decoration: none">{{res_count_scope.row.res_count}}</a>
                        </template>
                      </el-table-column>
                      <el-table-column prop="scan_count_before" label="扫码次数(发布前)" :formatter="formatScanCount" width="80"></el-table-column>
                      <el-table-column prop="scan_count_after" label="扫码次数(发布后)" width="80"></el-table-column>
                      <!-- <el-table-column prop="res_type" label="资源类型" :formatter="showResType"> </el-table-column> -->
                      <!-- <el-table-column prop="res_suffix" label="文件格式"> </el-table-column> -->
                      <el-table-column prop="qr_create_time" label="生成时间" width="100"> </el-table-column>
                      <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                          <el-button v-if="scope.row.code != undefined && scope.row.code != null && scope.row.code != ''" type="primary" size="small" @click="showQrCode(scope.row)">查看二维码</el-button>
                          <el-button v-else type="warning" size="small" @click="generateChapterQrCode(scope.row)">生成二维码</el-button>
                          <el-button type="warning" size="small" @click="editChapterQr(scope.row)" style="margin-top:5px">编辑</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  <!-- </el-col> -->
                <!-- </el-row> -->

              </el-tab-pane>
            </el-tabs>
          <!-- </div> -->
        </el-col>
      </el-row>
    <!-- </el-container> -->
    <el-dialog title="二维码名称修改" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="二维码名称">
          <el-input v-model="editQrName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="saveQrName()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 点击章节下资源数量时弹出此窗 -->
    <el-dialog title="资源列表" :visible.sync="dialogResVisible">
      <el-table :data="resList" ref="resListTable">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="name" label="资源名称"></el-table-column>
        <!-- <el-table-column prop="name" label="二维码名称"></el-table-column> -->
        <!-- <el-table-column prop="book_name" label="所属图书"></el-table-column> -->
        <!-- <el-table-column prop="scan_count_before" label="扫码次数(发布前)"></el-table-column> -->
        <!-- <el-table-column prop="scan_count_after" label="扫码次数(发布后)"></el-table-column> -->
        <el-table-column prop="resourceType" label="资源类型" :formatter="showResType"> </el-table-column>
        <!-- <el-table-column prop="res_suffix" label="文件格式"> </el-table-column> -->
        <!-- <el-table-column prop="create_time" label="生成时间" width="100"> </el-table-column> -->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button v-if="scope.row.resourceType != 4" type="primary" size="small" @click="resPreview(scope.row)">在线预览</el-button>
            <!-- <el-button v-else type="warning" size="small" @click="resPreview(scope.row)">在线预览</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :hide-on-single-page="true"
        :total="resListTotal"
        :page-size="size"
        layout="prev, pager, next"
        @current-change="changePage"
      ></el-pagination>
    </el-dialog>

    <el-dialog title="视频播放" :visible.sync="dialogVideoVisible" :destroy-on-close="true">
      <video
        :src="resPath"
        :controls="true"
        class="video-js vjs-big-play-centered vjs-fluid"
        webkit-playsinline="true"
        playsinline="true"
        x-webkit-airplay="allow"
        x5-playsinline
        style="width: 100%;height:500px"
        ref="video">
      </video>
    </el-dialog>
    <el-dialog title="音频播放" :visible.sync="dialogAudioVisible" :destroy-on-close="true">
      <audio
        :src="resPath"
        :controls="true"
        style="width: 100%;"
        ref="audio"
      >
      </audio>
    </el-dialog>

    <el-dialog title="ppt预览" :visible.sync="dialogPPtVisible" :destroy-on-close="true" width="40%" custom-class="ppt_dialog" top="3vh">
      <el-carousel indicator-position="outside" arrow="always">
        <el-carousel-item v-for="item in pptList" :key="item">
          <img :src="item" style="width:100%;height:100%;object-fit:unset"/>

        </el-carousel-item>
      </el-carousel>
    </el-dialog>

    <el-dialog title="图片预览" :visible.sync="dialogImgVisible" :destroy-on-close="true" width="80%" custom-class="img_dialog" top="1vh">

          <img :src="resPath" style="width:100%;height:auto;object-fit:unset"/>


    </el-dialog>
  </div>
</template>

<script>
import CONST from '../../const';
import qs from 'qs';
export default {
  name: "generateQrCode",
  data() {
    return {
      bookNameParam:'',
      bookStart:1,
      bookSize:10,
      bookTotal:0,
      bookList:[],
      activeName:'first',
      uploadFilePath:CONST.SERVICE_REST_PACKAGE + 'increaseQrDiy/uploadFile',
      qrDiyList:[],
      curBookId:'',
      curBookName:'',
      start: 1,
      size: 10,
      tableList:[],
      tableTotal:0,
      resTypeEnum: {1:'图片', 2:'视频', 3:'文档', 4:'资源组', 5:'ppt', 6:'pdf', 7:'音频'},
      qrNameParam:'',
      resourceTypeParam:'',
      bookCatalogList:[],
      maxLevel: 0,
      levelMap:[],
      dialogFormVisible: false,
      editQrName:'',
      editChapter: null,
      dialogResVisible: false,
      resList: [],
      resListTotal: 0,
      resListStart: 1,
      resPath: '',
      dialogVideoVisible: false,
      dialogAudioVisible: false,
      dialogPPtVisible: false,
      dialogImgVisible: false,
      pptList: []
    }
  },
  methods: {
    getBookList() {
      this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseBook/selectGetPageList", {
          params: {
            currentPage: this.bookStart,
            pageSize: this.bookSize,
            searchText: this.bookNameParam
          },
        })
        .then((response) => {
          this.bookList = response.data.records;
          this.curBookId = this.bookList[0].id;
          this.curBookName = this.bookList[0].bookName;
          this.bookTotal = response.data.total;
          this.listQrDiy();
        });
    },
    changeBookPage: function (val) {
      this.bookStart = val;
      this.getBookList();
    },
    listQrDiy() {
      this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseQrDiy/selectList")
        .then((response) => {
          this.qrDiyList = response.data;
          for(var i=0;i<this.qrDiyList.length;i++) {
            this.qrDiyList[i].defaultLogo = "/ymer/action/file/showImageWithoutWaterMark?filename="+ this.qrDiyList[i].logo;
            this.qrDiyList[i].simpleLogo = this.qrDiyList[i].logo;
            this.$set(this.qrDiyList[i],"isSaveDisable", true);
            this.$set(this.qrDiyList[i],"isResetDisable", true);
          }
          this.showQrDiyByBook(this.curBookId, this.curBookName);
        }
      );
    },
    uploadSuccess(imgData, response){
      imgData.logo = "/ymer/action/file/showImageWithoutWaterMark?filename="+ response.path;
      imgData.simpleLogo = response.path;
      imgData.isSaveDisable = false;
    },
    showQrDiyByBook(bookId, bookName) {
      this.curBookId = bookId;
      this.curBookName = bookName;
      if(this.activeName == 'first') {
        this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseQrDiy/selectBookQrDiy", {
          params: {
              bookId: bookId
            }
          }).then((response) => {
            var bookQrDiyList = response.data;
            var qrDiyBookMap = {};
            for(var i=0;i<bookQrDiyList.length;i++) {
              qrDiyBookMap[bookQrDiyList[i].qrDiyId] = bookQrDiyList[i];
            }
            for(var i=0;i<this.qrDiyList.length;i++) {
              if(qrDiyBookMap[this.qrDiyList[i].id] != undefined && qrDiyBookMap[this.qrDiyList[i].id] != null) {
                this.qrDiyList[i].logo = "/ymer/action/file/showImageWithoutWaterMark?filename="+ qrDiyBookMap[this.qrDiyList[i].id].logo;
                this.qrDiyList[i].simpleLogo = qrDiyBookMap[this.qrDiyList[i].id].logo;
                this.qrDiyList[i].bookQrDiyId = qrDiyBookMap[this.qrDiyList[i].id].id;
                this.qrDiyList[i].isResetDisable = false;
              }else {
                this.qrDiyList[i].logo = this.qrDiyList[i].defaultLogo;
                this.qrDiyList[i].isResetDisable = true;

              }
              this.qrDiyList[i].isSaveDisable = true;
            }
          }
        );
      }else if(this.activeName == 'second') {
        this.start = 1;
        this.listResourceQr();
      }else {
        this.listChapterQr();
      }
    },
    saveBookQrDiy(imgData) {
      let param = {
          bookId: this.curBookId,
          qrDiyId: imgData.id,
          logo: imgData.simpleLogo
      };
      this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrDiy/saveBookQrDiy", param)
        .then((response) => {
          if(response.status == 200) {
            imgData.isResetDisable = false;
            imgData.isSaveDisable = true;
            this.$message({
              message: '保存成功',
              type: 'success'
            });
          }else {
            this.$message.error(response.message);
          }
        }
      );
    },
    deleteBookQrDiy(item) {
      this.$confirm('确认重置吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {bookQrDiyId:item.bookQrDiyId}
          this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrDiy/deleteBookQrDiy", qs.stringify(param))
            .then((response) => {
              if(response.status == 200) {
                this.$message({
                  message: '重置成功',
                  type: 'success'
                });
                item.logo = item.defaultLogo;
                item.isResetDisable = true;
              }
            });
        })
    },
    changeTab(tab) {
      var tabName = tab.name;
      this.activeName = tabName;
      this.start = 1;
      this.size = 10;
      this.tableList = [];
      this.tableTotal = 0;
      if(tabName == 'first') {
        this.showQrDiyByBook(this.curBookId, this.curBookName);
      }else if(tabName == 'second') {
        this.listResourceQr();
      }else {
        this.listChapterQr();
      }
    },
    //列举素材码
    listResourceQr() {
      this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/selectListResourceQr", {
        params: {
            bookId: this.curBookId,
            qrName: this.qrNameParam,
            resourceType: this.resourceTypeParam,
            start: this.start,
            size: this.size
          }
        }).then((response) => {
          this.tableList = response.data.datas;
          for(var i=0;i<this.tableList.length;i++) {
            this.tableList[i].book_name = this.curBookName;
            let itemData = this.tableList[i]
            if(itemData.res_type==4){
              itemData.res_suffix='group'
            }
          }
          this.tableTotal = response.data.total;
        }
      );
    },
    //列举章节码
    listChapterQr() {
      this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/selectListChapterQr", {
        params: {
            bookId: this.curBookId
          }
        }).then((response) => {
          this.bookCatalogList = response.data;
          this.maxLevel = this.bookCatalogList[0].cate_level;
          for(var i=1;i<=this.maxLevel;i++) {
            this.levelMap[i] = [];
          }
        }
      );
    },
    //翻页
    changePage: function (val) {
      this.start = val;
      if(this.activeName == 'second') {
        this.listResourceQr();
      }else if(this.activeName == 'third') {
        this.listChapterQr();
      }
    },
    //批量生成素材码
    generateMultiResQrCode() {
      var selectDatas = this.$refs.resQrTable.selection;
      // if(selectDatas.length == 0) {
      //   this.$message({
      //     message: '请选择数据',
      //     type: 'warning'
      //   });
      //   return;
      // }
      var selectIds = [];
      var selectNames = [];
      var selectSuffixs = [];
      var selectQrNames = [];
      for(var i=0;i<selectDatas.length;i++) {

        selectIds.push(selectDatas[i].res_id);
        selectNames.push(selectDatas[i].res_name);
        selectSuffixs.push(selectDatas[i].res_suffix);
        var qrName = selectDatas[i].name;
        if(qrName == undefined || qrName == null || qrName.trim() == '') {
          qrName = selectDatas[i].res_name;
        }
        selectQrNames.push(qrName);
      }
      this.$confirm('确认生成吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '生成中...'
        });
        let param = {bookId:this.curBookId, resourceId:selectIds.toString(), resourceName:selectNames.toString(), resourceSuffix:selectSuffixs.toString(), qrName:selectQrNames.toString()};
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/generateResQr", qs.stringify(param))
          .then((response) => {
            if(response.status == 200) {
              /*this.$message({
                message: '生成成功',
                type: 'success'
              });*/
              // this.start = 1;
              this.listResourceQr();
            }else {
              this.$message.error(response.message);
            }
            loading.close();
          });
      })
    },
    //单条生成素材码
    generateResQrCode(row) {
      this.$confirm('确认生成吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '生成中...'
        });
        var qrName = row.name;
        if(qrName == undefined || qrName == null || qrName.trim() == '') {
          qrName = row.res_name;
        }
        let param = {bookId:this.curBookId, resourceId:row.res_id, resourceName:row.res_name, resourceSuffix:row.res_suffix, qrName:qrName};
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/generateResQr", qs.stringify(param))
          .then((response) => {
            this.listResourceQr();
            loading.close();
          });
      })
    },
    //查看二维码
    showQrCode(row) {
      this.$alert('<img src="'+ '/ymer/action/file/showImageWithoutWaterMark?filename='+ row.code +'" />', '', {
          dangerouslyUseHTMLString: true
      });
    },
    //导出图书素材码
    exportResQrCode() {
      var selectDatas = this.$refs.resQrTable.selection;

      var selectIds = [];

      for(var i=0;i<selectDatas.length;i++) {

        selectIds.push(selectDatas[i].res_id);

      }
      const loading = this.$loading({
          // lock: true,
          text: '导出中...'
        });
        let param = {bookId:this.curBookId, bookName:this.curBookName, resId:selectIds.toString()};
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/exportResQr", qs.stringify(param))
          .then((response) => {
            if(response.status == 200) {
              UTIL.downloadFile('/pmph/action/file/getFile?filename='+ response.data.path);
            }else {
              this.$message.error(response.message);
            }
            loading.close();
          }).catch((error) => {
            loading.close();
            console.error(error)
        })
    },
    showResType(row, column, cellValue, index) {
      return this.resTypeEnum[cellValue];
    },
    //按目录级别对目录分组
    groupChapter(row, column, cellValue, index) {
      if(row.pid != 0) {
        this.levelMap[row.cate_level].push(row);
      }
      return row.name;
    },
    //根据目录级别选中目录
    levelCheck(checked, value) {
      var chapters = this.levelMap[value];
      for(var i=0;i<chapters.length;i++) {
        this.$refs.chapterQrTable.toggleRowSelection(chapters[i], checked);
      }
    },
    //批量生成章节码
    generateMultiChapterQrCode() {
      var selectDatas = this.$refs.chapterQrTable.selection;
      if(selectDatas.length == 0) {
        this.$message({
          message: '请选择数据',
          type: 'warning'
        });
        return;
      }
      var selectIds = [];
      var selectQrNames = [];
      var selectChildIds = [];
      for(var i=0;i<selectDatas.length;i++) {

        selectIds.push(selectDatas[i].id);
        var qrName = selectDatas[i].qr_name;
        if(qrName == undefined || qrName == null || qrName.trim() == '') {
          qrName = selectDatas[i].name;
        }
        selectQrNames.push(qrName);
        if(selectDatas[i].res_count != 0) {
          selectChildIds.push(selectDatas[i].res_path.split('~')[0]);
        }else {
          selectChildIds.push('no');
        }

      }
      this.$confirm('确认生成吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '生成中...'
        });
        let param = {bookId:this.curBookId, chapterId:selectIds.toString(), qrName:selectQrNames.toString(), resPath:selectChildIds.toString()};
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/generateChapterQr", qs.stringify(param))
          .then((response) => {
            if(response.status == 200) {
              /*this.$message({
                message: '生成成功',
                type: 'success'
              });*/
              this.listChapterQr();
            }else {
              this.$message.error(response.message);
            }
            loading.close();
          }).catch((error) => {
            loading.close();
            console.error(error)
          })
      })
    },
    //单条生成章节码
    generateChapterQrCode(row) {
      if(row.res_count == 0) {
        this.$message({
          message: '该章节下无资源',
          type: 'warning'
        });
        return;
      }
      this.$confirm('确认生成吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '生成中...'
        });
        var qrName = row.qr_name;
        if(row.qr_name == undefined || row.qr_name == null || row.qr_name.trim() == '') {
          qrName = row.name;
        }
        let param = {bookId:this.curBookId, chapterId:row.id, qrName:qrName, resPath:row.res_path.split('~')[0]};
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/generateChapterQr", qs.stringify(param))
          .then((response) => {
            if(response.status == 200) {
              this.$message({
                message: '生成成功',
                type: 'success'
              });
              this.listChapterQr();
            }else {
              this.$message.error(response.message);
            }
            loading.close();
          }).then((response) => {
            loading.close();
          });
      })
    },
    //导出图书章节码
    exportChapterQrCode() {
      var selectDatas = this.$refs.chapterQrTable.selection;

      var selectIds = [];

      for(var i=0;i<selectDatas.length;i++) {

        selectIds.push(selectDatas[i].id);

      }
      const loading = this.$loading({
          // lock: true,
          text: '导出中...'
        });
        let param = {bookId:this.curBookId, bookName:this.curBookName, resId:selectIds.toString()};
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/exportChapterQr", qs.stringify(param))
          .then((response) => {
            if(response.status == 200) {
              UTIL.downloadFile('/pmph/action/file/getFile?filename='+ response.data.path);
            }else {
              this.$message.error(response.message);
            }
            loading.close();
          }).catch((error) => {
            loading.close();
            console.error(error)
          })
    },
    editChapterQr(row) {
      var qrName = row.qr_name;
      if(qrName == undefined || qrName == null || qrName.trim() == '') {
        qrName = row.name;
      }
      this.editQrName = qrName;
      this.editChapter = row;
      this.dialogFormVisible = true;
    //   this.$prompt('请输入二维码名称', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       inputValue: qrName
    //       // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    //       // inputErrorMessage: '邮箱格式不正确'
    //     }).then(({ value }) => {
    //       if(value.trim() == '') {
    //         this.$message({
    //           type: 'warning',
    //           message: '请输入二维码名称'
    //         });
    //         return;
    //       }
    //       var param = {qrId:row.qr_id, qrName:value, qrType:1};
    //       this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/saveQrName", qs.stringify(param))
    //       .then((response) => {
    //         if(response.code == 1) {
    //           row.qr_name = value;
    //         }else {
    //           this.$message.error(response.msg);
    //         }
    //       });
    //     }).beforeClose(() => {
    //       return false;
    //     });
    },
    saveQrName() {
      if(this.editQrName.trim() == '') {
        this.$message({
          type: 'warning',
          message: '请输入二维码名称'
        });
        return;
      }

      var param = {qrId:this.editChapter.qr_id, qrName:this.editQrName, qrType:1};
      this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/saveQrName", qs.stringify(param))
      .then((response) => {
        if(response.status == 200) {
          this.editChapter.qr_name = this.editQrName;
          this.dialogFormVisible = false;
        }else {
          this.$message.error(response.message);
        }
      }).then((response) => {
        this.$message.error(response.message);
      });
    },
    //获取章节下资源
    listRes(row) {
      this.resListStart = 1;
      this.resListTotal = 0;
      this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/listResByCateId", {
        params: {
            // bookId: this.curBookId,
            // qrName: this.qrNameParam,
            cateId: row.childIds,
            start: this.resListStart,
            size: this.size
          }
        }).then((response) => {
          this.resList = response.data.records;
          // for(var i=0;i<this.tableList.length;i++) {
          //   this.tableList[i].book_name = this.curBookName;
          // }
          this.resListTotal = response.data.total;
          this.dialogResVisible = true;
        }
      );
    },
    resPreview(row) {
      this.dialogVideoVisible = false;
      this.dialogAudioVisible = false;
      this.dialogPPtVisible = false;
      this.dialogImgVisible = false;
      if(row.resourceType == 1) {
        //图片
        this.dialogImgVisible = true;
        this.resPath = CONST.ENV.RESOURCE_SERVER_URL+ row.path;

      }else if(row.resourceType == 2) {
        this.dialogVideoVisible = true;
        this.resPath = CONST.ENV.RESOURCE_SERVER_URL+ row.path;
        //视频
      }else if(row.resourceType == 5) {
        //ppt
        this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/listPptImg", {
        params: {
            id: row.id
          }
        }).then((response) => {
            this.dialogPPtVisible = true;
            this.pptList = response.data;
            for(var i=0;i<this.pptList.length;i++) {
              this.pptList[i] = CONST.ENV.RESOURCE_SERVER_URL + this.pptList[i];
            }

        })
      }else if(row.resourceType == 6) {
        //pdf同ppt处理目前一样
        this.axios.get(CONST.SERVICE_REST_PACKAGE + "increaseQrCode/listPptImg", {
        params: {
            id: row.id
          }
        }).then((response) => {
            this.dialogPPtVisible = true;
            this.pptList = response.data;
            console.log(this.pptList)
            for(var i=0;i<this.pptList.length;i++) {
              this.pptList[i] = CONST.ENV.RESOURCE_SERVER_URL+ this.pptList[i];
            }

        })
      }else if(row.resourceType == 7) {
        //音频
        this.dialogAudioVisible = true;
        this.resPath = CONST.ENV.RESOURCE_SERVER_URL+ row.path;
      }
    },
    formatScanCount(row, column, cellValue, index){
      let fuxingCount = 0
      if(row.scan_count_before){
        fuxingCount = row.scan_count_before;
      }
      let pubCount = 0
      if(row.scan_qulity_before){
        pubCount = row.scan_qulity_before;
      }
      return fuxingCount+pubCount
    },
  },
  created() {
    this.getBookList();
  }
};
</script>
<style scoped>

  .el-card /deep/ .el-card__header {
    padding: 8px 15px;
    background-color: rgb(242, 242, 242);
  }
  #pane-third /deep/ .el-card__body {
    padding: 5px;
    height: calc(100% - 70px);
    /* width: 100%; */
  }

  #pane-second /deep/ .el-card__body {
    padding: 5px;
    height: calc(100% - 70px);
    /* width: 100%; */
  }

  .clear {
    clear: both;
  }

  .el-main{
    padding:0px;
  }

  .book_item {
    padding: 10px;
    font-size: 14px;
    /* margin-bottom: 10px; */
    /* line-height: 30px; */
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .qr_button_bottom {
    margin-top: 5px;
  }

  .qr_logo {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  /* .el-scrollbar /deep/ .el-scrollbar__wrap .el-scrollbar__view{
    white-space: nowrap;
    display: inline-block;
  }
  .el-scrollbar /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  } */
  .el-dialog__wrapper /deep/ .ppt_dialog {
    height: 90%;
  }
  .el-dialog__wrapper /deep/ .img_dialog /deep/ .el-dialog__body{
    padding:2px
  }
  .el-dialog__wrapper /deep/ .el-carousel__container {
    height: 70vh;
  }

  .qrbg {
    width:200px;
    height:200px;
    margin:0 auto;
    border:1px solid black;
    position:relative;
    background:url(~@static/img/qr_base.png) no-repeat
  }
</style>
